<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>

		<link rel="stylesheet" href="fonts/icomoon.css">
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="fonts/style.css">
		<script src="js/flexible.js"></script> <!-- //自适配屏幕 -->
		<script src="js/echarts.min.js"></script>
		<script src="js/jQuery.min.js"></script>

	</head>
	<body>
		<!-- 父盒子大容器 -->
		<div class="viewport">
			<div class="column">
				<!-- 左1模块 -->
				<div class="panel overview">
					<!-- 框里面的内容 -->
					<div class="inner">
						<ul>
							<li>
								<h4>2190</h4>
								<span>
									<i class="icon-dot"></i>
									设备总数
								</span>
							</li>
							<li>
								<h4>190</h4>
								<span>
									<i class="icon-dot" style="color: #6acca3;"></i>
									季度新增
								</span>
							</li>
							<li>
								<h4>3001</h4>
								<span>
									<i class="icon-dot" style="color: #6acca3;"></i>
									运营设备
								</span>
							</li>
							<li>
								<h4>108</h4>
								<span>
									<i class="icon-dot" style="color: #ed3f35;"></i>
									异常设备
								</span>
							</li>
						</ul>
					</div>
				</div>
				<!-- 左2模块 -->
				<div class="panel monitor">
					<div class="inner">
						<div class="tabs">
							<a href="javascript:;" class="active">故障设备监控</a>
							<a href="javascript:;">异常设备监控</a>
						</div>
						<div class="content" style="display: block;">
							<div class="head">
								<span class="col">故障时间</span>
								<span class="col">设备地址</span>
								<span class="col">异常代码</span>
							</div>
							<div class="marquee-view">
								<div class="marquee">
									<div class="row">
										<span class="col">20180701</span>
										<span class="col">11北京市昌平西路金燕龙写字楼</span>
										<span class="col">1000001</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190601</span>
										<span class="col">北京市昌平区城西路金燕龙写字楼</span>
										<span class="col">1000002</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190704</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000003</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20180701</span>
										<span class="col">北京市昌平区建路金燕龙写字楼</span>
										<span class="col">1000004</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190701</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000005</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190701</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000006</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190701</span>
										<span class="col">北京市昌平区建西路金燕龙写字楼</span>
										<span class="col">1000007</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190701</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000008</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190701</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000009</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190710</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000010</span>
										<span class="icon-dot"></span>
									</div>
								</div>
							</div>
						</div>
						<div class="content">
							<div class="head">
								<span class="col">异常时间</span>
								<span class="col">设备地址</span>
								<span class="col">异常代码</span>
							</div>
							<div class="marquee-view">
								<div class="marquee">
									<div class="row">
										<span class="col">20190701</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000001</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190701</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000002</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190703</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000002</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190704</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000002</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190705</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000002</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190706</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000002</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190707</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000002</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190708</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000002</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190709</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000002</span>
										<span class="icon-dot"></span>
									</div>
									<div class="row">
										<span class="col">20190710</span>
										<span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
										<span class="col">1000002</span>
										<span class="icon-dot"></span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 左2模块结束-->
				<!-- 左3模块 -->
				<div class="point panel">
					<div class="inner">
						<h3>点位分布统计</h3>
						<div class="chart">
							<div class="pie"></div>
							<div class="data">
								<div class="item">
									<h4>320,11</h4>
									<span>
										<i class="icon-dot" style="color: #ed3f35"></i>
										点位总数
									</span>
								</div>
								<div class="item">
									<h4>418</h4>
									<span>
										<i class="icon-dot" style="color: #eacf19"></i>
										本月新增
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 左3模块结束 -->
			<div class="column">
				<!-- 中1模块 -->
				<div class="map">
					<h3>
						<span class="icon-cube"></span>
						设备数据统计
					</h3>
					<div class="chart">
						<div class="geo"></div>
					</div>
				</div>
				<!-- 中1模块结束-->
				<!-- 中2 -->
				<div class="users panel">
					<div class="inner">
						<h3>全国用户总量统计</h3>
						<div class="chart">
							<!-- 柱形图bar -->
							<div class="bar"></div>
							<div class="data">
								<div class="item">
									<h4>120,899</h4>
									<span>
										<i class="icon-dot" style="color: #ed3f35"></i>
										用户总量
									</span>
								</div>
								<div class="item">
									<h4>248</h4>
									<span>
										<i class="icon-dot" style="color: #eacf19"></i>
										本月新增
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 中2结束 -->

			<div class="column">
				<!-- 右1 -->
				<div class="order panel">
					<div class="inner">
						<!-- 筛选 -->
						<div class="filter">
							<a href="javascript:;" class="active">365天</a>
							<a href="javascript:;">90天</a>
							<a href="javascript:;">30天</a>
							<a href="javascript:;">24小时</a>
						</div>
						<!-- 数据 -->
						<div class="data">
							<div class="item">
								<h4>20,301,987</h4>
								<span>
									<i class="icon-dot" style="color: #ed3f35;"></i>
									订单量
								</span>
							</div>
							<div class="item">
								<h4>99834</h4>
								<span>
									<i class="icon-dot" style="color: #eacf19;"></i>
									销售额(万元)
								</span>
							</div>
						</div>
					</div>
				</div>
				<!-- 右1结束-->
				<!-- 右2 -->
				<div class="sales panel">
					<div class="inner">
						<div class="caption">
							<h3>销售额统计</h3>
							<a href="javascript:;" class="active" data-type="year">年</a>
							<a href="javascript:;" data-type="quarter">季</a>
							<a href="javascript:;" data-type="month">月</a>
							<a href="javascript:;" data-type="week">周</a>
						</div>
						<div class="chart">
							<div class="label">单位:万</div>
							<div class="line"></div>
						</div>
					</div>
				</div>
				<!-- 右2结束-->
				<!-- 右3-1 -->
				<div class="wrap">
					<div class="channel panel">
						<div class="inner">
							<h3>渠道分布</h3>
							<div class="data">
								<div class="radar"></div>
							</div>
						</div>
					</div>
					<!-- 右3-1结束-->
					<!-- 右3-2 -->
					<div class="quarter panel">
						<div class="inner">
							<h3>一季度销售进度</h3>
							<div class="chart">
								<div class="box">
									<div class="gauge"></div>
									<div class="label">50<small> %</small></div>
								</div>
								<div class="data">
									<div class="item">
										<h4>1,321</h4>
										<span>
											<i class="icon-dot" style="color: #6acca3"></i>
											销售额(万元)
										</span>
									</div>
									<div class="item">
										<h4>150%</h4>
										<span>
											<i class="icon-dot" style="color: #ed3f35"></i>
											同比增长
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 右3-2结束-->
				<!-- 右4 -->
				<div class="top panel">
					<div class="inner">
						<div class="all">
							<h3>全国热榜</h3>
							<ul>
								<li>
									<i class="icon-cup1" style="color: #d93f36;"></i>
									可爱多
								</li>
								<li>
									<i class="icon-cup2" style="color: #68d8fe;"></i>
									娃哈啥
								</li>
								<li>
									<i class="icon-cup3" style="color: #4c9bfd;"></i>
									喜之郎
								</li>
							</ul>
						</div>
						<div class="province">
							<h3>各省热销 <i class="date">// 近30日 //</i></h3>
							<div class="data">
								<ul class="sup">
									<!-- <li>
				                    <span>北京</span>
				                    <span>25,179 <s class="icon-up"></s></span>
				                  </li>
				                  <li>
				                    <span>河北</span>
				                    <span>23,252 <s class="icon-down"></s></span>
				                  </li> -->
								</ul>
								<ul class="sub">
									<!-- <li><span></span><span> <s class="icon-up"></s></span></li> -->
								</ul>
							</div>
						</div>
					</div>
				</div>
				<!-- 右4结束-->
			</div>
		</div>
		<script src="js/index.js"></script>
		<!-- 想使用中国地图必须先引用这个china.js文件 -->
		<script src="js/china.js"></script>
		<!-- 引入我们自己的地图js文件 -->
		<script src="js/myMap.js"></script>
	</body>
</html>
